import React, {useState } from 'react';
import './Sidebar.less'
import Ico from './Ico'
import {CaretDownOutlined} from '@ant-design/icons'
import sidebar from "../../unit/sidebar";
import TabList from "./TabList";
import {Link,useNavigate} from 'react-router-dom'
import store from '../../store'
import { Modal } from 'antd';
import MyUntil from "../../unit/MyUntil";




function Sidebar() {
    let sidebarArr = sidebar
    const [myUrl] = useState('http://localhost:3001/images')
    const [myUser,setMyUser] = useState(store.getState().user)
    const [myArr,setMyArr] = useState([])
    const [shownone,setShownone] = useState('none')
    const [isModalVisible,setIsModalVisible] = useState(false)
    const [myIndex,setMyIndex] = useState(0)
    const navigate = useNavigate()
    function getNewArr(val){
        setMyArr(val)
    }
    // 订阅redux
    store.subscribe(()=>{
        setMyUser(store.getState().user)
    })
    //确认退出登录
    function handleOk(){
        setIsModalVisible(false)
        localStorage.removeItem('token');
        window.top.location.replace('/Login')


    }
    function handleCancel(){
        setIsModalVisible(false)
    }



    function openShow(item){
        for (let i = 0; i < sidebar.length; i++) {
            if (item === sidebar[i].id){
                sidebar[i].bgcolor = '#293846'
            }
        }
        setMyIndex(item)
        if(item === myIndex){
            setMyIndex(0)
        }else {
        }
    }
    function showNone(){
        if (shownone === 'none'){
            setShownone('')
        }else {
            setShownone('none')
        }
    }


    //头像下的五个子菜单
    function click(index){
        if (index === 5){
            setIsModalVisible(true)
        }
    }
    return (
        <div className="sidebarBox">
            <div className='sidPortrait'>
                <div className='sidImg'>
                    <img src={myUrl + myUser.user_url} alt=""/>
                </div>
                <div>{myUser.user_name}</div>
                <div className='myHover' onClick={showNone}>{myUser.role_name} <CaretDownOutlined style={{lineHeight:"2px",fontSize:"10px"}}/>
                    <ul style={{display:shownone}} className="showNone">
                        <li onClick={()=>{click(1)}}>修改头像</li>
                        <li onClick={()=>{click(2)}}>个人资料</li>
                        <li onClick={()=>{click(3)}}>联系我们</li>
                        <li onClick={()=>{click(4)}}>信箱</li>
                        <li onClick={()=>{click(5)}}>安全退出</li>
                    </ul>
                </div>
            </div>
            <div className='sidebarbox1'>
                <ul>{myArr.map(item=>{
                    return(
                        (item.list !== undefined)
                            ?<li key={item.key} ><div onClick={()=>{openShow(item.id,item)}}>
                                <span>{item.icon}</span>
                                {item.title}
                                <span><Ico item={item.list} index={item.id} myIndex={myIndex}/></span></div>
                                <TabList item={item.list} index={item.id} myIndex={myIndex}/>
                            </li>
                            :<li key={item.key} ><Link className='LINK' to={item.path}>
                                <span className='myHome'>{item.icon}</span>{item.title}</Link></li>
                    )
                })}
                </ul>
            </div>
            <Modal title="Basic Modal" visible={isModalVisible} onOk={handleOk} onCancel={handleCancel}>
                <div>是否退出登录？</div>
            </Modal>
            <MyUntil getNewArr={getNewArr}/>
        </div>
    );
}

export default Sidebar;